import React, { useState, useRef } from "react";
import { Tabs} from 'antd';
import MainPage from "./component/MainPage/index";
import CheckBillDetails from './component/CheckBillDetails/index';

const PeriodList = () => {

  const [activepage, setActivePage] = useState('1');

  const currentRow = useRef({});

  const { current } = currentRow;

  const mainPageProps = {
    openDetailPage(row){
      currentRow.current = row;
      setActivePage('2');
    }
  }

  const checkPageProps = {
    activepage,
    current,
    goback(){
      currentRow.current = {};
      setActivePage('1');
    }
  }
  
  const items = [
    {
      key: '1',
      children: <MainPage { ...mainPageProps} />,
    },
    {
      key: '2',
      children: <CheckBillDetails {...checkPageProps} />
    },
  ];

  return (
			<Tabs activeKey={activepage} items={items} renderTabBar={()=>null} />
	)
};

export default PeriodList;